<template>
  <div class="info">
    <div class="top">
      <el-button @click="back" style="margin-right: 2%;height: 100%;">
        <template #icon>
          <iconBack></iconBack>
        </template>
        返回
      </el-button>
      <el-button @click="submit" style="margin-right: 2%;height: 100%;">
        <template #icon>
          <iconSave></iconSave>
        </template>
        确认
      </el-button>
    </div>
    <div class="main">
      <div class="one">
        <div class="one-one">
          <div class="AI">AI得分</div>
          <div class="AIScore">&emsp;{{ workInfo.aiScore }}</div>
          <div class="teacher">教师得分</div>
          <div class="teacherScore">
            <el-input v-model.number="workInfo.teacherScore" class="input" ></el-input>
          </div>
          <div class="total">总分</div>
            <div class="totalInfo">&emsp;{{workInfo.totalPoints}}</div>
        </div>
        <div class="one-two">
          <div class="workName">作业名称</div>
          <div class="wNameInfo">&ensp;{{ workInfo.taskName }}</div>
          <div class="studentName">学生姓名</div>
          <div class="sNameInfo">&ensp;{{ workInfo.studentName }}</div>
          <div class="studentId">学生学号</div>
          <div class="sId">&ensp;{{ workInfo.studentNum }}</div>
        </div>
      </div>
      <div class="four">
        <div class="title">&ensp;教师评语:</div>
        <div class="teacherSuggest">
          <el-input 
            type="textarea" 
            rows="4.5"
            resize="none"
            v-model="workInfo.teacherSuggest"></el-input>
        </div>
      </div>
      <div class="four">
        <div class="title">&ensp;AI分析:</div>
        <div class="question">
          <div style="overflow-wrap: break-word;">&emsp;{{workInfo.aiAnalyse}}</div>
        </div>
      </div>
      <div class="four" style="border:0px;">
        <div class="title">&ensp;AI评语:</div>
        <div class="question">
          <div style="overflow-wrap: break-word;">&emsp;{{workInfo.aiSuggest}}</div>
        </div>
      </div>
    </div>

    <div v-for="question in workInfo.list" :key="question.id">

      <el-card  style="max-width: 100%;margin-top: 30px;" v-if="question.type==1">  
        <template #header> 
          <div class="card-header">  
            <span>题目：{{ question.questionContent }}</span>  
          </div>  
        </template>  
        <el-button><el-link type="primary" :underline="false" :href="question.content">下载学生作业</el-link></el-button>
        </el-card>  
      <el-card  style="max-width: 100%;margin-top: 30px;" v-else-if="question.type==0">  
        <template #header>  
          <div class="card-header">  
            <span>题目：{{ question.questionContent }}</span>  
          </div>  
        </template> 
        <div style="overflow-wrap: break-word;">{{question.content}}</div>
      </el-card>  
    </div>


  </div>
</template>
<script setup>
import { ref,onMounted } from 'vue';
import iconBack from '../../../assets/backone.vue';
import iconSave from '../../../assets/submit.vue';
import { useRouter,useRoute } from 'vue-router';
import {getStudentWorkInfoAPI,submitUpdateStudentWorkInfoAPI} from '../../../api/teacher/work';

const router=useRouter()
const {params,query}=useRoute()
const studentId=ref(query.studentId)
const workId=ref(query.workId)

const back=()=>{
  router.go(-1)
}
//提交修改的学生信息
const submit=async()=>{
  console.log("点击了确认按钮",workInfo.value.teacherScore,workInfo.value.teacherSuggest)
  let params={
    teacherScore:workInfo.value.teacherScore,
    teacherSuggest:workInfo.value.teacherSuggest
  }
  await submitUpdateStudentWorkInfoAPI().then(()=>{
    getWorkInfo()
  })
}
const workInfo=ref(
  {id:1,taskName:"作业文武",studentName:"学生名字",studentNum:"34535",teacherScore:89,aiAnalyse:'AI分析内容',aiSuggest:'werw',teacherSuggest:'iii',aiScore:99,totalPoints:78,state:0,
    list:[
      {type:0,serialNumber:1,questionContent:"timu1",content:'danaewr'},
      {type:1,serialNumber:2,questionContent:"timu2",content:'https://xjb-springboot.oss-cn-hangzhou.aliyuncs.com/d7b1b381-d63c-4f1d-ad11-2876a3ff7c59.doc'},
      {type:0,serialNumber:3,questionContent:"timu4",content:'dana1'},
      {type:1,serialNumber:4,questionContent:"timu5",content:'https://xjb-springboot.oss-cn-hangzhou.aliyuncs.com/d7b1b381-d63c-4f1d-ad11-2876a3ff7c59.doc'},
    ]
  })
  // 获取学生作业列表
const getWorkInfo=async()=>{
  let params={
    marckId:query.marckId
  }
  const result=await getStudentWorkInfoAPI(params)
  workInfo.value=result.data
  console.log(workInfo.value)
}
onMounted(()=>{
  getWorkInfo()
})
</script>
<style scoped>
.info{
  height: 100%;
  width: 90%;
  margin: 1% 5% 0 5%;
  /* background-color: bisque; */
}
.top{
  width: 100%;
  height: 6%;
  /* background-color: aqua; */
}
.main{
  width: 100%;
  height: 94%;
  /* background-color: rgba(0, 255, 255, 0.24); */
  margin-top: 1%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--el-box-shadow-light);
  border-radius:6px;
}
.input{
  width: 100%;
  height: 99%;
  border: none;
  outline: none;
  /* background-color: red; */
}
:deep(.el-input__wrapper){
  width: 100%;
  height: 96%;
  border: 10px;
  box-shadow: none;
  background-color: rgba(185, 185, 185, 0.135);
}
:deep(.el-input__wrapper):hover{
  background-color: rgba(185, 185, 185, 0.274);
}
.one{
  width: 100%;
  height: 18%;
  /* margin-top:2px; */
}
.one-one{
  width: 100%;
  height: 49%;
  /* background-color: aquamarine; */
}
.AI{
  height: 100%;
  width: 7%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  float: left;
  border-right: 1.5px solid #DCDFE6;
  border-bottom: 1.5px solid #DCDFE6;
}
.AIScore{
  height: 100%;
  width: 26%;
  display: flex;
  flex-direction: row;
  align-items: center;
  float: left;
  border-right: 1.5px solid #DCDFE6;
  border-bottom: 1.5px solid #DCDFE6;
}
.teacher{
  height: 100%;
  width: 7%;
  float: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* border-right: 1.5px solid #DCDFE6; */
  border-bottom: 1.5px solid #DCDFE6;
}
.teacherScore{
  height: 100%;
  width: 26%;
  display: flex;
  flex-direction: row;
  align-items: center;
  float: left;
  border: 1.5px solid #DCDFE6;
  border-top:none;
}
.teacherScore:hover{
  /* border-top: 1px solid #004cff62; */
  border-right: 1.5px solid #DCDFE6;
  border-bottom: 1.5px solid #DCDFE6;
  /* border-top:none; */
}
.total{
  height: 100%;
  width: 7%;
  float: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-right: 1.5px solid #DCDFE6;
  border-bottom: 1.5px solid #DCDFE6;
}
.totalInfo{
  height: 100%;
  width: 26%;
  display: flex;
  flex-direction: row;
  align-items: center;
  float: left;
  border-bottom: 1.5px solid #DCDFE6;
}
.one-two{
  width: 100%;
  height: 50%;
  border-bottom: 1.5px solid #DCDFE6;
  /* background-color: rgba(0, 0, 255, 0.164); */
}
.workName{
  height: 100%;
  width: 7%;
  /* background-color: aliceblue; */
  float: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-right: 1.5px solid #DCDFE6;
}
.wNameInfo{
  height: 100%;
  width: 26%;
  /* background-color: aqua; */
  float: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: center; */
  border-right: 1.5px solid #DCDFE6;
}
.studentName{
  height: 100%;
  width: 7%;
  /* background-color: blue; */
  float: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-right: 1.5px solid #DCDFE6;
}
.sNameInfo{
  height: 100%;
  width: 26%;
  /* background-color: blueviolet; */
  float: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: center; */
  border-right: 1.5px solid #DCDFE6;
}
.studentId{
  height: 100%;
  width: 7%;
  /* background-color: aqua; */
  float: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-right: 1.5px solid #DCDFE6;
}
.sId{
  height: 100%;
  width: 25.4%;
  display: flex;
  flex-direction: row;
  align-items: center;
  float: left;
}
.two{
  width: 100%;
  height: 20%;
  border-bottom: 1.5px solid #DCDFE6;
}
.title{
  width: 100%;
  height: 25%;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* background-color:red; */
}
.three{
  width: 100%;
  height: 31.3%;
  border-bottom: 1.5px solid #DCDFE6;
  background-color:blue;
}
.four{
  width: 100%;
  height: 27%;
  /* background-color: aqua; */
  border-bottom: 1.5px solid #DCDFE6;
}
.teacherSuggest{
  width:100%;
  height: 100%;
  /* background-color: #00fcfc; */
}
:deep(.el-textarea__inner) {
  height: 100%;
  background-color: rgba(185, 185, 185, 0.135);
  box-shadow: 0 0 0 0px;
}
:deep(.el-textarea__inner):hover{
  background-color: rgba(185, 185, 185, 0.274);
}
:deep(.el-textarea__inner:hover) {
  box-shadow: 0 0 0 0px;
}
:deep(.el-textarea__inner:focus) {
  box-shadow: 0 0 0 0px;
}
.answer{
  width: 100%;
  height: 60%;
  border-bottom: 1.5px solid rgba(77, 76, 76, 0.404);
  border-left: 1.5px solid rgba(77, 76, 76, 0.404);
  border-right: 1.5px solid rgba(77, 76, 76, 0.404);
}
.operation{
  width: 100%;
  height: 15%;
}
.answer-one{
  width: 100%;
  height: 85%;
}
</style>